import { Component } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import { AtTabs,AtTabsPane } from 'taro-ui'
import './food.less'
import Cata from './cata'
import FoodList from './foodlist'
export default class Food extends Component {
    constructor(){
        super(...arguments)
        this.state={
            current:0,
            tabList:[{title:"点菜"},{title:"评价"},{title:"商家"}],
            foodList:[],
            currentList:[],
        }
    }
    getCurrent(value){
      this.setState({current:value});
    }
    // 切换分类
    changeCata(selectCata){
      if(this.state.foodList.some(item=>item.pid==selectCata.id)){
        //不用加载数据
        this.setState({currentList:this.state.foodList.filter(item=>item.pid==selectCata.id),selectCata:selectCata});
      }else{
        //需要加载数据
        this.setState({foodList:this.state.foodList.concat(this.getData(selectCata))},()=>{
          this.setState({currentList:this.state.foodList.filter(item=>item.pid==selectCata.id),selectCata:selectCata});
        });
      }
    }
    getData(selectCata){
      let count = Math.round(Math.random()*2);
      return Array.from(Array(Math.round(Math.random()*20)),
      (v,k)=>({price:Math.round(Math.random()*20),sole:Math.round(Math.random()*50),img:count,pid:selectCata.id,id:selectCata.id+"_"+k,title:"分类"+selectCata.id+"菜品"+(k+1)}));
    }
  render () {
    let {current,tabList,currentList,selectCata}=this.state;
    return (
      <View className='tabs'>
        <AtTabs className='item' current={current} onClick={this.getCurrent.bind(this)} tabList={tabList}>
        <AtTabsPane>
          <View className='food_body'>
            <Cata onChangeCata={this.changeCata.bind(this)}></Cata>
            <FoodList selectCata={selectCata} currentList={currentList}></FoodList>
          </View>
        </AtTabsPane>
        <AtTabsPane>评价</AtTabsPane>
        <AtTabsPane>商家</AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
